<template>
    <g-loding-shade :show="routeLoading" />
    <router-view v-slot="{ Component, route }">
        <!-- 远程组件下，不包含缓存 -->
        <component :is="Component" v-if="isRemoteContext" />
        <!-- 正常页面下，可能包含缓存 -->
        <CacheAlive
            :is="Component"
            v-else
            :current-route-view-key="currentRouteViewKey"
            :route="route"
        />
    </router-view>
</template>

<script lang="ts">
export default {
    name: 'App'
}
</script>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '@jsjn/micro-core-store'
import CacheAlive from './components/cacheAlive.vue'

const route = useRoute()
const store = useStore()

const isRemoteContext = window.__IS_REMOTE_COMPONENT__

// 路由跳转加载
const routeLoading = computed(() => store.state.currentStatus.routeLoading)

// 当前路径 router-view 的 key，iframe 需要
const currentRouteViewKey = computed(() =>
    (route.meta.urlQuery as string)?.includes('onlyKey') ? route.path : undefined
)
</script>

<style lang="scss" scoped></style>
